import React,{useState, useEffect} from 'react'
import {NavLink} from 'react-router-dom'

export default function EffectFn() {
  const [count, setCount] = useState(0);
  const [food, setFood] = useState('rice');
  // useEffect的作用是可以在函数组件中使用生命周期函数（componentDidUpdate、componentDidMount、componentWillUnmount）
  // useEffect接受两个参数
  // 第一个参数是回调函数，在修改数据后执行，类似componentDidUpdate以及componentDidMount
  // 第二个参数是依赖的数组，当对应的依赖变化时，回调函数才会执行。
  // 第二个参数如果是空数组，第一个参数就只执行componentDidMount
  // 第二个参数如果不写，第一个参数就执行componentDidMount和componentDidUpdate
  // 第二个参数如果写了依赖项，就会在依赖变化时执行,以及componentDidMount
  useEffect(()=>{
    console.log(666);
    document.title = `点击次数：${count}`
    // return中写需要清除的副作用，功能类似componentWillUnmount
    return ()=>{
      console.log(777);
    }
  },[count])
  return (
    <div>
      <p>点击按钮，数字增加，页面标题也发生变化</p>
      <button onClick={() => setCount(count+1)}>点击次数：{count}</button>
      <p>午餐：{food}</p>
      <button onClick={() => setFood('hotpot')}>吃火鍋</button>
      <br></br>
      <NavLink to="/effectclass">effectclass页面</NavLink>
    </div>
  )
}
